<template>
<div>
  <h1>用户反馈列表</h1>
  <div style="text-align: left" v-if="showBtn">
    <el-popconfirm
        title="删除后无法还原确定继续吗"
        @confirm="deleteScenicByIds">
      <template #reference>
        <el-button size="small" type="primary">
          <el-icon><delete/></el-icon>批量删除</el-button>
      </template>
    </el-popconfirm>
  </div>
  <el-table  tooltip-effect="light" v-loading="loading" :data="noteList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column type="expand">
      <template #default="props">
        <el-descriptions border>
          <el-descriptions-item label="反馈信息">{{props.row.noteContent}}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-table-column>
    <el-table-column label="反馈信息">
      <template #default="scope">
        {{scope.row.noteContent.length>15 ? scope.row.noteContent.substr(0,15)+'...' : scope.row.noteContent}}
      </template>
    </el-table-column>
    <el-table-column label="反馈人" prop="userName"></el-table-column>
    <el-table-column label="反馈时间" prop="noteTime"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="deleteOne(scope.row.noteId)" type="primary" size="small"><el-icon><Delete/></el-icon>&nbsp;删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :pager-count=5
  />
</div>
</template>

<script>
import {deleteNoteByIds, getNoteList} from "@/api/multimedia";
import {Delete} from "@element-plus/icons";

export default {
  name: "fallback",
  components: {Delete},
  data(){
    return{
      showBtn:false,
      listDelete:[],
      loading:true,
      noteList:[],
      currentPage:1,
      pageSize:10,
      total:0
    }
  },
  mounted() {
    this.getNotes()
  },
  methods:{
    getNotes(){
      getNoteList(this.currentPage,this.pageSize).then(response=>{
        this.total=response.data.total
        this.noteList=response.data.noteList
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })
    },
    deleteOne(id){
      const ids=[id]
      deleteNoteByIds(ids).then(()=>{
        this.getNotes()
      })
    },
    deleteScenicByIds(){
      const ids=[]
      this.listDelete.forEach(note =>{
        ids.push(note.noteId)
      })
      deleteNoteByIds(ids).then(()=>{
        this.getNotes()
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getNotes()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getNotes()
    },
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
  }
}
</script>

<style scoped>

</style>
